var xhr;

var image = document.getElementById('floatingWindowImage');
var text = document.getElementById('floatingWindowText');
var background = document.getElementById('floatingWindowBackground');

function ShowFloatingWindow(categoryId, event)
{
    SendRequest("floatingWindow?categoryId=" + categoryId);
    var posX = 0, posY = 0;
    if (event.pageX || event.pageY)
    {
        posX = event.pageX;
        posY = event.pageY;
    }
    else if (event.clientX || event.clientY)
    {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }

    image.style.position = "absolute";
    image.style.top = (posY - 255) + "px";
    image.style.left = (posX + 30) + "px";
    text.style.position = "absolute";
    text.style.top = (posY - 25) + "px";
    text.style.left = (posX + 30) + "px";
    background.style.position = "absolute";
    background.style.top = (posY - 255) + "px";
    background.style.left = (posX + 30) + "px";
}
function SendRequest(url)
{
    xhr = new XMLHttpRequest();
    xhr.onreadystatechange = ProcessResponse;
    xhr.open('GET', url);
    xhr.send(null);
}

var funFeedBack;

function ProcessResponse()
{
    if (xhr.readyState == 4)
    {
        if (xhr.status == 200)
        {
            var response = JSON.parse(xhr.response);

            var str = response[0].name + ' :  ' + response[0].description;
            var src = response[0].src;

            image = document.getElementById('floatingWindowImage');
            image.src = src;
            text = document.getElementById('floatingWindowText');
            text.innerText = str;
            image.style.display = 'block';
            text.style.display = 'block';
            background.style.height = (240 + text.clientHeight) + "px";
            background.style.display = 'block';

            var i = 1;
            funFeedBack = setInterval(function()
            {
                str = response[i % response.length].name + ' :  ' + response[i % response.length].description;
                src = response[i % response.length].src;

                image = document.getElementById('floatingWindowImage');
                image.src = src;
                text = document.getElementById('floatingWindowText');
                text.innerText = str;
                image.style.display = 'block';
                text.style.display = 'block';
                background.style.height = (240 + text.clientHeight) + "px";
                background.style.display = 'block';
                i++;
            }, 3000);
        }
    }
}

function HideFloatingWindow()
{
    clearInterval(funFeedBack);

    image = document.getElementById('floatingWindowImage');
    image.style.display = 'none';
    text = document.getElementById('floatingWindowText');
    text.style.display = 'none';
    background.style.display = 'none';
}